<template>
    <a-sub-menu :key="menuInfo.path">
        <template #icon>
            <!-- <sysIcon type="system-changyong_wenjian" style="font-size: 16px" /> -->
            <myIcon :type="menuInfo.meta.icon" style="font-size:16px" />
        </template>
        <template #title>{{ menuInfo.name }}</template>
        <template v-for="item in menuInfo.children" :key="item.path">
            <template v-if="!item.children.length">
                <a-menu-item :key="item.path" v-if="!item.meta.hidden">
                    <template #icon>
                        <myIcon v-if="item.meta.icon" :type="item.meta.icon" style="font-size:16px" />
                    </template>
                    <a-tooltip v-if="item.name&&item.name.length>8 && !store.menu.collapsed">
                        <template #title>{{ item.name }}</template>
                        {{ item.name }}
                    </a-tooltip>
                    <span v-else>{{ item.name }}</span>
                </a-menu-item>
            </template>
            <template v-else>
                <sub-menu :menu-info="item" :key="item.path" />
            </template>
        </template>
    </a-sub-menu>
</template>
<script setup>
defineProps({
    menuInfo: {
        type: Object,
        default: () => ({}),
    },
})
const store = useStore()
</script>
